<template>
  <div class="newsDetail-container">
    <h3 class="title">{{news.title}}</h3>
    <div class="date">
      <span>时间：{{news.add_time | datatime('YYYY-MM-DD')}}</span>
      <span>浏览次数 {{news.click}}次</span>
    </div>
    <van-divider/>
    <div class="content" v-html="news.content"></div>
    <van-field
      v-model="content"
      rows="5"
      autosize
      type="textarea"
      maxlength="50"
      placeholder="有什么意见或者想要发表的可以点击评论哟"
      show-word-limit
    />
    <van-button type="info" class="post" block @click="postComment">发布评论</van-button>
    <!-- 评论列表 -->
    <div class="commentlist">
      <div class="item" v-for="item in comments" :key="item.id">
        <div>{{item.user_name}}：{{item.content}}</div>
        <div>评论时间：{{item.add_time | datatime('YYYY-MM-DD hh:mm')}}</div>
      </div>
    </div>
    <van-button
      :loading="loading"
      loading-text="加载中..."
      type="danger"
      plain
      block
      @click="loadMore"
    >查看更多</van-button>

    <!-- 回到顶部 -->
    <BackTop />
  </div>
</template>

<script>
import { fetchNewsDetail, fetchNewsComment,fetchreview } from "@/api/index.js";
import BackTop from "@/components/BackTop.vue"
export default {
  props: ["id"],
  data() {
    return {
      page: 1,
      content: "",
      news: {},
      comments: [],
      loading: false,
      isDone: false // 记录评论是否加载完成
    };
  },
  created() {
    this._fetchNewsDetail();
    this._fetchNewsComment();
  },
  methods: {
    async _fetchNewsDetail() {
      let { message } = await fetchNewsDetail(this.id);
      this.news = message;
      console.log(this.news)
    },
    async _fetchNewsComment() {
      this.loading = true;
      let { message } = await fetchNewsComment(this.id, this.page);
      this.loading = false;
      if (message.length === 0) {
        this.isDone = true;
        return;
      }
      this.comments = [...this.comments, ...message];
    },
    loadMore() {
      if (this.isDone) {
        // 之前已经加载完毕了，给用户提示
        this.$toast("--已经加载完毕--");
        return;
      }
      this.page++;
      this._fetchNewsComment();
    },
    async postComment(){
        let {message,insertId,status} = await fetchreview(this.id,this.content)
        if(status === 0){
            this.$toast(message);
            // 发表出的评论
            let item = {
                add_time: Date.now(),
                content:this.content,
                id:insertId,
                user_name:"安福用户"
            }

            this.comments.unshift(item)
            this.content = ''
        }
    }
  },
  components:{
      BackTop
  }
};
</script>

<style lang="scss" scoped>
.newsDetail-container {
    padding: 6px;
    .date {
        display:flex;
        justify-content: space-between;
        font-size: 12px;
        color:#888;
    }

    .content {
       ::v-deep img {
            width:100%;
        }
    }

    .post {
        margin: 10px 0;
    }

    .commentlist {
        font-size: 12px;
        .item {
            background-color: #f2f2f2;
            margin: 4px 0 ;
        }
    }
}
</style>
